{%extends "base.html"%}

{%block header_extra%}
<link rel="stylesheet" href="{{STATIC_URL}}/js/jqueryui/css/smoothness/jquery-ui-1.8.18.custom.css" type="text/css">
<script type = "text/javascript" src = "{{STATIC_URL}}js/jit/jit.js"></script>
<script type = "text/javascript" src = "{{STATIC_URL}}js/chart.js"></script>
<script type = "text/javascript" src = "{{STATIC_URL}}js/filters.js"></script>
<script type = "text/javascript" src = "{{STATIC_URL}}js/jqueryui/jquery-ui.min.js"></script>
{%endblock%}

{%block content%}
<form method = "get">
    <select name = "param1">
        {%for f in fields%}
        <option value = "{{f}}"{%if param1 == f%} selected{%endif%}>{{f}}</option>
        {%endfor%}
    </select>
    <select name = "param2">
        {%for f in fields%}
        <option value = "{{f}}"{%if param2 == f%} selected{%endif%}>{{f}}</option>
        {%endfor%}
    </select>
    <!--<input type = "checkbox" name = "show_empty" caption = "show empty">-->
    <button>Generate</button>
<!--    {{matrix|pprint}}-->
</form>

<div><form id = "filters">{%if debug%}{%csrf_token%}{%endif%}
    <ul id = "filter_list">
    </ul>
</form></div>

{%if param1 and param2%}

{% autoescape off %}
<script type = "text/javascript">
    var map = {{map}}, paramsx = {{paramsx}}, paramsy = {{paramsy}};
    var tables = {{filters}};
</script>
{% endautoescape %}

<div id = "chart" style = "width: 100%; height: 200px"></div>
<ul id="id-list"></ul>

<form method = "post" action = "gen_pdf/">
    {%csrf_token%}
    <input type = "hidden" name = "param1" value = "{{param1}}">
    <input type = "hidden" name = "param2" value = "{{param2}}">
    <button>Download as pdf</button>
</form>
<a href = "#">Show queries</a>
<div class = "queries" style = "display:none">{{sql_queries|pprint}}</div>
{%endif%}
{%endblock%}
